<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spirograph</title>

<script type="text/javascript" src="../scripts/mootools-trunk-1475.js" charset="utf-8"></script>
	
<!--[if IE]>
<script type="text/javascript" src="../scripts/excanvas-compressed.js"></script>
<![endif]-->		

<script type="text/javascript">
   
function start() {
	setInterval(draw,750);
}	


var i = 30;
var t = 1;
	  
function draw() {

	// Dynamically initialize canvas using excanvas. This is only required by IE
	if ( Browser.Engine.trident ) {			
		G_vmlCanvasManager.initElement(document.getElementById('canvasSpiro'));			
	}

	var ctx = document.getElementById('canvasSpiro').getContext('2d');
	ctx.clearRect(0,0,300,300); // clear canvas

	t++;
        
	ctx.save();
	ctx.strokeStyle =  "rgba(255, 255, 255, 1)";
	ctx.lineWidth = 2;
	ctx.lineJoin = 'round';
	ctx.translate(150,150);
	drawSpirograph(ctx,150,-4*(i),1);
	ctx.restore();

}	  
	  
function drawSpirograph(ctx,R,r,O){
	var x1 = R-O;
	var y1 = 0;
	var i  = 1;
	ctx.beginPath();
	ctx.moveTo(x1,y1);
	do {
		if (i>20000) break;
		var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos((t)*(i*Math.PI/72))
		var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin((t)*(i*Math.PI/72))
		ctx.lineTo(x2,y2);
		x1 = x2;
		y1 = y2;
		i++;
	} while (x2 != R-O && y2 != 0 );
	ctx.stroke();
}

</script>
	
<style type="text/css">

body {
	margin: 20px;
	padding: 0;
	background: #c30;
	text-align: center;
}

#spirograph {
	width: 300px;
	height: 300px;
	overflow: none;
}

#canvasSpiro {
	margin: 0 auto 0;
	padding: 0;
}

</style>
</head>
<body onLoad="start();">

<div id="spirograph">
	<canvas id="canvasSpiro" width="300" height="300"></canvas>
</div>

  </body>
</html>